<template>
  <div>
    <!-- 表单 -->
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="80px"
      :inline="false"
      size="normal"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科" prop="subjectID">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="form.subjectID"
              @change="slectsub"
            >
              <el-option
                :label="sub.subjectName"
                :value="sub"
                v-for="sub in subjectList"
                :key="sub.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="试题类型" prop="questionType">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="form.questionType"
            >
              <el-option
                :label="value"
                :value="name"
                v-for="(value, name) in questionType"
                :key="name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目备注" prop="remarks">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" prop="erjimulu">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="form.erjimilu"
            >
              <el-option
                :label="value"
                :value="value"
                v-for="(value, index) in subtitle"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度" prop="difficulty">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="form.difficulty"
            >
              <el-option
                :label="value"
                :value="name"
                v-for="(value, name) in difficultyType"
                :key="name"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="企业简称" prop="shortName">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="form.tags"
            >
              <el-option
                :label="value"
                :value="value"
                v-for="(value, index) in label"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向" prop="direction">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="form.direction"
            >
              <el-option
                :label="value"
                :value="value"
                v-for="(value, index) in direction"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="城市" prop="province">
            <el-select
              placeholder="请选择"
              class="cityselect"
              v-model="form.province"
              @change="changeCheckPro"
              style="width: 48%"
            >
              <el-option
                :label="value"
                :value="value"
                v-for="(value, index) in provinceList"
                :key="index"
              ></el-option>
            </el-select>
            <el-select
              placeholder="请选择"
              v-model="form.city"
              class="select"
              style="width: 48%"
            >
              <el-option
                :label="value"
                :value="value"
                v-for="(value, index) in city"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" prop="keyword">
            <el-input
              placeholder="根据题干搜索"
              v-model="form.keyword"
            ></el-input>
          </el-form-item>
          <el-form-item label="录入人" prop="lururen">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="form.lururen"
            >
              <el-option
                :label="value"
                :value="value"
                v-for="(value, index) in lururen"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-row type="flex" justify="end">
              <el-col :span="12" style="posiotion: relative">
                <div style="position: absolute; right: 0">
                  <el-button size="small" @click="resetForm">清除</el-button>
                  <el-button
                    type="primary"
                    size="small"
                    @click="$emit('searchQst', form)"
                  >
                    搜索
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { getDifficulty } from '@/utils'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  props: {
    param: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      form: {
        ...this.param,
        subjectID: '',
        difficulty: '',
        remarks: '',
        province: '',
        city: '',
        questionType: '',
        direction: '',
        keyword: '',
        shortName: '',
        tags: '',
        lururen: '',
        erjimulu: ''
      },
      subjectList: [],
      difficultyType: {},
      rules: {
        subjectID: [],
        difficulty: [],
        remarks: [],
        province: [],
        city: [],
        questionType: [],
        direction: [],
        keyword: [],
        shortName: [],
        tags: [],
        lururen: [],
        erjimulu: []
      },
      params: {
        page: 1,
        pagesize: 999999
      },
      provinceList: [],
      city: [],
      questionType: [],
      direction,
      subtitle: [],
      label: [],
      lururen: []
    }
  },
  created () {
    this.getSubjectList()
    this.provinceList = provinces()
    this.questionType = getDifficulty(questionType)
    this.difficultyType = getDifficulty(difficulty)
    console.log(this.provinceList)
  },
  methods: {
    slectsub (data) {
      console.log('================================')
      console.log(data)
    },
    provinces,
    citys,
    async resetForm () {
      try {
        await this.$refs.form.resetFields()
        this.form.city = ''
      } catch (error) {
        console.log(error)
      }
    },
    changeCheckPro () {
      this.city = citys(this.form.province)
    },
    async getSubjectList () {
      const { data } = await list()
      console.log(data.items)
      this.subjectList = data.items
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  margin-top: 50px;
  .el-form-item {
    margin-bottom: 10px;
    .select {
      margin-left: 10px !important;
    }
    .el-input {
      height: 30px;
      .el-input__inner {
        height: 30px !important;
        line-height: 30px !important;
      }
      .el-input__prefix,
      .el-input__suffix {
        top: 10px;
      }
    }
  }
}
</style>
